<template>
	<div class="register">
		<!-- <img src="../../../static/images/agent-logo.png" alt="" class="top-logo"> -->
        <div class="header flex-c">DL客户系统</div>
		<div class="top-title">
			<div class="gray-line"></div>
			<div class="top-title-fonts">代理注册</div>
			<div class="gray-line"></div>
		</div>
		
		<van-loading class="loading" type="spinner" color="#1989fa"  v-if="showLoading"/>
		
		<div class="input-area">
			<div class="user-name">
				<img src="../../../static/images/agent-login-account.png" alt="" class="user-name-icon">
				<div class="middle-gray-line"></div>
				<input id="userName" type="text" placeholder="请输入帐户,5到12位字母或数字" ref="accountInput">
			</div>
			<div class="user-name user-pwd">
				<img src="../../../static/images/agent-login-pwd.png" alt="" class="user-name-icon ">
				<div class="middle-gray-line"></div>
				<input id="userPwd" type="password" placeholder="请输入密码,6位或以上数字/字母/字符" ref="pwdInput">
			</div>
			<div class="user-name user-pwd">
				<img src="../../../static/images/agent-login-pwd.png" alt="" class="user-name-icon ">
				<div class="middle-gray-line"></div>
				<input id="userPwdCfm" type="password" placeholder="请确认密码" ref="pwdInputCfm">
			</div>
			<div class="user-name user-pwd">
				<img src="../../../static/images/agent-reg-realName.png" alt="" class="user-name-icon real-name-icon">
				<div class="middle-gray-line"></div>
				<input type="text" maxlength="12" placeholder="请输入真实姓名" ref="realName">
			</div>
			<div class="user-name user-pwd">
				<img src="../../../static/images/agent-reg-phone.png" alt="" class="user-name-icon phone-icon">
				<div class="middle-gray-line"></div>
				<input type="number" maxlength="11" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请输入手机号码" ref="phone">
			</div>
			<div class="user-name user-pwd">
				<img src="../../../static/images/agent-reg-qq.png" alt="" class="user-name-icon qq-icon">
				<div class="middle-gray-line"></div>
				<input type="text " placeholder="请输入QQ" ref="qq">
			</div>
		</div>
		<div class="submitBlue">
			<van-button class="btnCover" color="#00459E" @click.native="subReg" round>提交注册</van-button>
		</div>
		<div class="go-back2" @click="toLogin()">已有账号，
			<span class="red-fonts">登录</span>
			<img class="arrow-icon" src="../../../static/images/activeRed.gif" alt="">
		</div>
	</div>
</template>

<script>
import {Toast} from 'vant'

export default {
	name: 'register',
	components: {
		Toast
	},
	data() {
		return {
			showLoading: false,
		}
	},
	beforeRouteLeave(to, from, next) {    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
		this.$destroy(true)
		next()
	},
	created() {
	},
	mounted() {
	},
	methods: {
		toLogin(){
			this.$router.push('/login')
		},
		subReg() {
			if (this.$refs.accountInput.value.length > 12 || this.$refs.accountInput.value.length < 6) {
				Toast.fail('请输入6到12位字母和数字组合的用户名')
				return false;
			}
			if (this.$refs.pwdInput.value.length > 12 || this.$refs.pwdInput.value.length < 6) {
				Toast.fail('请输入6到12位字母和数字组合的密码')
				return false;
			}
			if (this.$refs.pwdInputCfm.value.length > 12 || this.$refs.pwdInputCfm.value.length < 6) {
				Toast.fail('请确认密码')
				return false;
			}
			if (this.$refs.realName.value.length === 0) {
				Toast.fail('请输入真实姓名')
				return false;
			}
			if (this.$refs.phone.value.length === 0) {
				Toast.fail('请输入手机号码')
				return false;
			}
			if (this.$refs.pwdInput.value != this.$refs.pwdInputCfm.value) {
				Toast.fail('两次密码输入不一致')
				return false;
			}
			let params = {
				loginName: this.$refs.accountInput.value,
				password: this.$refs.pwdInput.value,
				realName: this.$refs.realName.value,
				phone: this.$refs.phone.value,
				qq: this.$refs.qq.value,
			}
			this.ServerAPI.postAPI(this.API.addRegister, params, (success, data) => {
				if (success) {
					if (data.code == '0000') {
						Toast.success(data.info)
						this.$router.push("/login");
					} else {
						Toast.fail(data.info)
					}
				} else {
					Toast.fail('网络错误，请重试')
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.register {
	font-family: PingFang-SC-Medium;
	.top-logo {
		width: 1.8rem;
		display: block;
		margin: .3rem auto .3rem;
	}
    .header {
        width: 2.6rem;
        height: 0.86rem;
        color: #FFFFFF;
        background: #1B3D8E;
        border-radius: .12rem;
        font-size: .4rem;
        margin: .4rem auto 0;
    }
	.top-title {
		display: flex;
		justify-content: center;
		align-items: center;
        margin-top: .2rem;
		.gray-line {
			width: 1rem;
			height: 1px;
			background: #5D5D5D;
		}
		.top-title-fonts {
			font-size: .45rem;
			font-weight: bolder;
			margin: 0 .2rem;
		}
	}
	.input-area {
		width: 90%;
		margin: .6rem auto 0;
		position: relative;
		
		.name-remind {
			position: absolute;
			top: -.4rem;
			font-size: .24rem;
			color: #AAAAAA;
		}
		
		.user-name {
			display: flex;
			align-items: center;
			padding: .2rem .3rem;
			border-radius: .6rem;
			background: rgb(238,238,238);
			
			.user-name-icon {
				width: .4rem;
				margin-left: .2rem;
			}
			.real-name-icon {
				width: .5rem;
				height: .5rem;
				margin-left: .1rem;
			}
			.phone-icon {
				width: .35rem;
				height: .5rem;
			}
			.qq-icon {
				width: .35rem;
			}
			.middle-gray-line {
				height: .6rem;
				width: 1px;
				background: rgba(142,142,141,.5);
				margin: 0 .2rem;
			}
			
			input {
				width: 100%;
				border: none;
				font-size: .26rem;
				background: rgb(238,238,238);
			}
			.vc-button {
				position: absolute;
				right: .15rem;
				width: 2rem;
				height: .8rem;
				line-height: .8rem;
				font-size: .26rem;
			}
		}
		
		
		.user-pwd {
			margin-top: .4rem;
			display: flex;
			align-items: center;
			padding: .2rem .35rem;
			border-radius: .6rem;
			
			.user-pwd-icon {
				width: .4rem;
				margin-right: .1rem;
			}
			
			input {
				width: 100%;
				border: none;
				font-size: .26rem;
			}
		}
	}
}


.submitBlue {
	width: 80%;
	margin: 0 auto;
	.btnCover {
		width: 100%;
		height: 1rem;
		line-height: 1rem;
		margin-top: .6rem;
		font-size: .35rem;
	}
}

.go-back2 {
	width: auto;
	text-align: center;
	margin-top: .3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #939393;
	.red-fonts {
		color: #0055F9;
		font-weight: bold;
	}
	.arrow-icon {
		height: .4rem;
		margin-left: .1rem;
	}
}
</style>

